---
title: Migrate from StyleSheet
---

import Seo from '../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Migration from StyleSheet',
        description: 'How to migrate to react-native-unistyles from StyleSheet'
    }}
>
    `Unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.

    You can replace `StyleSheet.create` with `createStyleSheet` and it will work exactly the same:

    ```diff lang="tsx"
    -const styles = StyleSheet.create({
    +const styles = createStyleSheet({
        scrollContainer: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }
    })
    ```

    If you're refactoring your components and require additional functionalities in any of them such as `breakpoints`, `media queries`, `variants`
     or `theme` you can incrementally pass `style(sheet)` into the `useStyles` hook:

    ```ts title="ExampleUnistyles.tsx" /const { styles }.*/
    export const ExampleUnistyles = () => {
      const { styles } = useStyles(stylesheet)
      // ... your component code
    }
    ```

:::tip
To follow the library's naming convention you need to rename `styles` to `stylesheet` and pass it
to the `useStyles` hook.
:::

    **With the hook in place, you can now use all the features.**
</Seo>
